<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <style type="text/css">
        /*重置{*/
        html{color:#000;background:#fff;}
        body,div{padding:0;margin:0;}
        img{border:none;}
        /*}重置*/
		
		.outer{
			position:relative;
			margin:50px auto;
			width:200px;height:100px ;
			border:1px solid red;
		}
		.modal{
			width:200px;height:100px ;
		}
		.inner{
			width:40px;height:20px;
			background: #fff;
			opacity: 0.5;
			filter:alpha(opacity=50);
			position: absolute;
			top:0;left: 0;
		}
		.show{
			width: 320px;height: 160px;
			position:relative;
			margin:20px auto;
			border:1px solid red;
			overflow: hidden;
		}
		.imgs{
			width:800px;height: 200px;
			position: absolute;
			
		}
		
		</style>
		
	</head>
	<body>
		<div class="outer" >
			<img src="images/brand2/001.png"  class="modal"/>
			<div class="inner"></div>
		</div>
		<div class="show">
			<div class="imgs">
				<img src="images/brand2/001.png"  />
			</div>
		</div>
		<script>
			//定义全局变量 
			var outer=document.querySelector(".outer");
			var inner=document.querySelector(".inner");
			var show=document.querySelector(".show");
			var imgs=document.querySelector(".imgs");
			var n,x,y;
			//点击 移动 离开
			inner.onmousedown=test1;
			document.onmousemove=test2;

			document.onmouseup=test3;
			
			function test1(event){
				n=true;
				var event=event||window.event;
				x=event.clientX-inner.offsetLeft;
				y=event.clientY-inner.offsetTop;
				
			}
			function test2(event){
				var event=event||window.event;
				
				if(n==true){
					inner.style.left=event.clientX-x+"px";
					inner.style.top=event.clientY-y+"px";
					imgs.style.left=-4*(parseInt(inner.style.left))+"px";
					imgs.style.top=-4*parseInt(inner.style.top)+"px";
					
					if(parseInt(inner.style.left)<0){
						
						inner.style.left=0+"px";
					}
					if(parseInt(inner.style.top)<0){
						inner.style.top=0+"px";
					}
					if(parseInt(inner.style.left)>outer.clientWidth-inner.clientWidth){
					    inner.style.left=outer.clientWidth-inner.clientWidth+"px";
					    
					}
					if(parseInt(inner.style.top)>outer.clientHeight-inner.clientHeight){
						inner.style.top=outer.clientHeight-inner.clientHeight+"px";
						
					}
					
					if(parseInt(imgs.style.left)>0){
						imgs.style.left=0+"px";
						
					}
					if(parseInt(imgs.style.top)>0){
						imgs.style.top=0+"px";
					}
					
					if(parseInt(imgs.style.left)<-1*(imgs.clientWidth-show.clientWidth)){
						imgs.style.left=-1*(imgs.clientWidth-show.clientWidth)+80+"px";
					}
					if(parseInt(imgs.style.top)<-4*(outer.clientHeight-inner.clientHeight)){
						imgs.style.top=-4*(outer.clientHeight-inner.clientHeight)+80+"px";
					}
				}
			}
			function test3(){
				n=false;
			}
		</script>
	</body>
</html>
